<template>
  <div>
    <div class="card">
      <el-card class="card-box" shadow="hover">
        总人数：22
      </el-card>
      <el-card class="card-box" shadow="hover">今日填报人数</el-card>
      <el-card class="card-box" shadow="hover">今日未填报人数</el-card>
      <el-card class="card-box" shadow="hover">今日健康人数</el-card>
      <el-card class="card-box" shadow="hover">今日疑似感染人数：2221</el-card>
    </div>
    <div class="title">近15天疫情防控填报数据</div>
    <ve-line :data="chartData"></ve-line>
    <div class="title">近15天疫情防控健康数据</div>
    <ve-line :data="chartData1"></ve-line>
  </div>
</template>

<script>
export default {
  name: 'index_info',
  props: {
    msg: String
  },
  data: function () {
    return {
      chartData: {
        columns: ["日期", "填报人数", "未填报人数"],
        rows: [
          { 日期: "07-09", 填报人数: 20, 未填报人数: 13 },
          { 日期: "07-10", 填报人数: 21, 未填报人数: 20 },
          { 日期: "07-11", 填报人数: 23, 未填报人数: 17 },
          { 日期: "07-12", 填报人数: 28, 未填报人数: 15 },
          { 日期: "07-13", 填报人数: 24, 未填报人数: 16 },
          { 日期: "07-14", 填报人数: 26, 未填报人数: 16 },
          { 日期: "07-15", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-16", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-17", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-18", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-19", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-20", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-21", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-22", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-23", 填报人数: 25, 未填报人数: 13 },
          { 日期: "07-24", 填报人数: 25, 未填报人数: 13 },
        ],
      },
      chartData1: {
        columns: ["日期", "健康人数", "疑似感染人数"],
        rows: [
          { 日期: "07-09", 健康人数: 20, 疑似感染人数: 13 },
          { 日期: "07-10", 健康人数: 21, 疑似感染人数: 20 },
          { 日期: "07-11", 健康人数: 23, 疑似感染人数: 17 },
          { 日期: "07-12", 健康人数: 28, 疑似感染人数: 15 },
          { 日期: "07-13", 健康人数: 24, 疑似感染人数: 16 },
          { 日期: "07-14", 健康人数: 26, 疑似感染人数: 16 },
          { 日期: "07-15", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-16", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-17", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-18", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-19", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-20", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-21", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-22", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-23", 健康人数: 25, 疑似感染人数: 13 },
          { 日期: "07-24", 健康人数: 25, 疑似感染人数: 13 },
        ],
      },
    };
  },
};
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.card {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}
.card-box {
  width: 250px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: rgb(58, 58, 58);
  cursor: pointer;

}

.title {
  width: 100%;
  text-align: left;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  padding-left: 20px;
}
</style>
